<template>
<div>
  <el-container>
    <el-aside width="200px" class="fixed-menu">
      <Menu :is-collapse="sidebar.isCollapse"/>
    </el-aside>
<!--    使用动态class 调整-->
    <el-container :class="{'right-container':!sidebar.isCollapse, 'hide-right-container':sidebar.isCollapse}">
      <el-header class="fixed-header">
        <Navbar @isCollapse="handleMenu" :user-info="userInfo"/>
      </el-header>
      <el-main  class="bigBox">
        <div v-if="$route.path === '/home'">
          <das-board/>
        </div>
        <div v-if="$route.path !== '/home'">
          <div style="margin-top: -10px;margin-bottom: 30px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{ this.$router.currentRoute.name }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <router-view/>
        </div>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<script>
import Navbar from "./components/Navbar";
import Menu from "./components/Menu";
import DasBoard from "./components/dasboard"
import loginAPI from "../../api/login";
export default {
  name: "Home",
  components: {
    Navbar,
    Menu,
    DasBoard
  },

  data(){
    return{
      sidebar:{
        isCollapse: false,
      },
      fixedHeader: true,
      userInfo: '',
      height:"",
      // path:'',
    }
  },
  computed:{
    routes(){
      return this.$store.state.routes;
    },
  },
  methods:{
    handleMenu(data){
      if (data === true){
        this.sidebar.isCollapse = true;
        return;
      }
      this.sidebar.isCollapse = false;
   }
  },
  created() {
  },
  mounted() {
    this.userInfo =  JSON.parse(window.sessionStorage.getItem('userInfo'))
    // this.path = this.$route.path
    //获取页面的分辨率
    this.height = document.documentElement.clientHeight - 170;
  },
  watch:{
    $route(to,from){
      this.userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
      this.path = to.path
    },
    userInfo(){
      return JSON.parse(window.sessionStorage.getItem('userInfo'))
    }
  }
}
</script>

<style lang="scss" scoped>
  .bigBox{
    height: 90vh;
  }
  .fixed-header{
    padding: 0 0; // 左右占满
  }
  /**
     右容器跟随侧边栏扩展调整
   */
    .right-container {
      height: auto;
      position: fixed;
      top: 0;
      right: 0;
      z-index: 9;
      width: calc(100% - 200px);
      transition: width 0.28s;
    }
  /**
    右容器跟随侧边栏收缩调整
  */
    .hide-right-container {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 9;
      width: calc(100% - 64px);
      transition: width 0.28s;
    }
    /**
       侧边栏位置调整
     */
    .fixed-menu {
      position: fixed;
      top: 0;
      left: 0;
      //height: 100%;
      z-index: 9;
      transition: width 0.28s;
    }

</style>


